<template>
	<view class="baseView">
		<u-image width="100%" height="300rpx" :src="mallDetail.image"></u-image>
		<view style="align-self: center;">
			<uni-card v-model="mallDetail" :title="mallDetail.name" :isShadow="true" style="margin-top: -50rpx;">
				<view>{{ mallDetail.introduction }}</view>
				<view class="myflexRow">
					<view style="margin-right: 5rpx;">月销量：{{ mallDetail.saleQuantity }}</view>
					<view style="margin-left: 5rpx;">人均消费：{{ mallDetail.avgCost }}</view>
				</view>
				<view>距离：{{ mallDetail.distance }}公里</view>
				<view>地址：{{ mallDetail.address }}</view>
			</uni-card>
		</view>
		<view style="width: 100%;min-height: 1000rpx;">
			<u-tabs-swiper
				ref="uTabs"
				:list="tabList"
				:current="current"
				@change="tabsChange"
				:is-scroll="false"
			></u-tabs-swiper>
			<swiper
				:current="swiperCurrent"
				@transition="transition"
				@animationfinish="animationfinish"
				style="min-height: 1000rpx;"
			>
				<swiper-item><foodMallList :mallId="detailId" @getShopData="childData"></foodMallList></swiper-item>
				<swiper-item>
					<scroll-view scroll-y style="height: 800rpx;width: 100%;">
						<view>这是第er个</view>
						<view>这是第er个</view>
						<view>这是第er个</view>
						<view>这是第er个</view>
						<view>这是第er个</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y style="height: 800rpx;width: 100%;">
						<view>这是第san个</view>
						<view>这是第san个</view>
						<view>这是第san个</view>
						<view>这是第san个</view>
						<view>这是第san个</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view v-if="current == 0" class="shop_bottom" v-model="shopData" style="background-color: #c6cad8;">
				<u-row :gutter="16"  align="center">
					<u-col :span="3" :offset="1"><u-icon label="购物车" name="shopping-cart"></u-icon></u-col>
					<u-col :span="4">
						<view>数量:{{ shopData.num }}</view>
						<view style="color: #DD6161">￥{{ shopData.money }}</view>
					</u-col>
					<u-col :span="2" :offset="2">
						<u-button type="success" size="mini" shape="circle">去结算</u-button>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detailId: 1,
			mallDetail: {},
			shopMap: new Map(),
			shopData: {
				num: 0,
				money: 0
			},
			tabList: [
				{
					name: '点菜'
				},
				{
					name: '评价'
				},
				{
					name: '商家介绍'
				}
			],
			current: 0,
			swiperCurrent: 0,
			childData: (shopId, data) => {
				//数据保存到shopMap
				this.shopMap.set(shopId, data);
				let tempNum = 0;
				let tempMoney = 0;
				this.shopMap.forEach(function(value, key) {
					tempNum = tempNum + value.num;
					tempMoney = tempMoney + value.money;
				});
				this.shopData.num = tempNum;
				this.shopData.money = tempMoney;
			}
		};
	},
	methods: {
		getMallDetailInfo() {
			this.$u.get(`/prod-api/api/takeout/seller/${this.detailId}`).then(res => {
				res.data.image = this.$u.http.config.baseUrl.concat(res.data.imgUrl);
				this.mallDetail = res.data;
			});
		},
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	},
	onLoad: function(option) {
		this.detailId = option.id;
		this.getMallDetailInfo();
	}
};
</script>

<style>
.shop_bottom {
	position: fixed;
	width: 100%;
	height: 80rpx;
	bottom: 0;
	left: 0;
	right: 0;
}
</style>
